<template>
	<div class="edit">
		<!-- 新建按钮 -->
		<Button type="primary" @click="add" style="margin: 0 0 20px;">新建供应</Button>
		<!-- 表格及分页 -->
		<Table :columns="columns" :data="tableData"></Table>
		<div class="center">
			<div class="pageBox">
				<Page :total="count" show-total :page-size="pageSize" @on-change="getList" />
			</div>
		</div>
		<!-- 新建面板 -->
		<Modal v-model="creatArticalModal" :title="modalMethod" @on-ok="save" width="800" @on-cancel="cancel">
			<Form :label-width="80">
				<FormItem label="服务名称">
					<Input v-model="articalObj.productName" placeholder="请输入服务名称"></Input>
				</FormItem>
				<div class="editBox ivu-form">
					<img
					:src="articalObj.productPhoto"
					v-show="articalObj.productPhoto !== '' && articalObj.productPhoto !== null && articalObj.productPhoto !== undefined"
					style="width:100px;height:100px;vertical-align: bottom;">
					<label class="ivu-form-item-label" style="width: 80px;">服务图片</label>
					<Upload :action="uploadUrl" :format="['jpg','jpeg','png']" :show-upload-list="false" :on-success="uploadSuc" :headers="headers">
						<Button icon="ios-cloud-upload-outline">选择文件</Button>
					</Upload>
				</div>
				<FormItem label="公司名称">
					<Input v-model="articalObj.companyName" placeholder="请输入公司名称"></Input>
				</FormItem>
				<div class="editBox ivu-form">
					<img
					:src="articalObj.companyLogo"
					v-show="articalObj.companyLogo !== '' && articalObj.companyLogo !== null && articalObj.companyLogo !== undefined"
					style="width:100px;height:100px;vertical-align: bottom;">
					<label class="ivu-form-item-label" style="width: 80px;">公司logo</label>
					<Upload :action="uploadUrl" :format="['jpg','jpeg','png']" :show-upload-list="false" :on-success="uploadLogoSuc" :headers="headers">
						<Button icon="ios-cloud-upload-outline">选择文件</Button>
					</Upload>
				</div>
				<FormItem label="服务报价">
					<Input v-model="articalObj.price" placeholder="请输入服务报价"></Input>
				</FormItem>
				<FormItem label="任务信息">
					<Select v-model="articalObj.serverTypeId">
						<Option v-for="item in classList" :value="item.id" :key="item.id">{{item.serviceName}}</Option>
					</Select>
				</FormItem>
			</Form>
			<div class="editBox ivu-form" style="clear: both;">
				<label class="ivu-form-item-label" style="width: 80px;">服务内容补充描述</label>
				<div style="margin-left: 80px;">
					<div id="editorElem" style="text-align:left"></div>
				</div>
			</div>
		</Modal>
		<!-- 删除面板 -->
		<Modal v-model="deleteArticalModal" title="删除版块" @on-ok="deleteArtical" @on-cancel="cancel">
			是否删除该数据?
		</Modal>
	</div>
</template>

<script>
	import E from 'wangeditor'
	import Util from '@/utils/index'
	export default {
		name: 'editor',
		data () {
			return {
				content: '', // 编辑器内容
				editor: '', // 编辑器
				// 表头
				columns: [{
						type: 'index',
						title: '序列',
						width: 100,
						align: 'center'
					},
					{
						title: '服务名称',
						key: 'productName'
					},
					{
						title: '服务图片',
						key: 'productPhoto',
						render: (h, params) => {
							if (params.row.productPhoto !== null && params.row.productPhoto !== '') {
								return h('img', {
									style: {
										height: '25px'
									},
									attrs: {
										src: params.row.productPhoto
									}
								})
							}
						}
					},
					{
						title: '公司名称',
						key: 'companyName'
					},
					{
						title: '公司logo',
						key: 'companyLogo',
						render: (h, params) => {
							if (params.row.companyLogo !== null && params.row.companyLogo !== '') {
								return h('img', {
									style: {
										height: '25px'
									},
									attrs: {
										src: params.row.companyLogo
									}
								})
							}
						}
					},
					{
						title: '服务报价',
						key: 'price'
					},
					{
						title: '任务信息',
						key: 'serverTypeId',
						render: (h, params) => {
							let temp = params.row.serverTypeId
							if (temp !== '' && temp !== null) {
								let temp1 = this.classList.find(ele => ele.id === temp)
								if (temp1 !== undefined) {
									temp = temp1.serviceName
								}
							}
							return h('div', temp)
						}
					},
					{
						title: '发布日期',
						key: 'releaseDate'
					},
					{
						title: '操作',
						key: 'action',
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginLeft: '5px',
										marginBottom: '5px'
									},
									on: {
										click: () => {
											this.edit(params.row)
										}
									}
								}, '修改'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginLeft: '5px',
										marginBottom: '5px'
									},
									on: {
										click: () => {
											this.remove(params.row)
										}
									}
								}, '删除')
							])
						}
					}
				],
				// 表格数据
				tableData: [],
				// 当前页
				page: 1,
				// 每页数量
				pageSize: 10,
				// 总数
				count: 0,
				// 新建面板是否展示
				creatArticalModal: false,
				articalObj: {}, // 文章对象
				modalMethod: '', // 方法
				classList: [], // 任务信息
				user: {},
				deleteArticalModal: false,
				deleteId: 0,
				headers: {},
				uploadUrl: sessionStorage.uploadUrl + '/files/v2/upload'
			}
		},
		methods: {
			// 渲染编辑器
			createEdit () {
				this.editor = new E('#editorElem')
				this.editor.customConfig.uploadImgShowBase64 = true
				this.editor.customConfig.menus = [
					'head',
					'bold',
					'italic',
					'underline',
					'strikeThrough',
					'foreColor',
					'backColor',
					'link',
					'list',
					'justify',
					'image',
					'video',
					'code',
					'undo',
					'redo'
				]
				this.editor.customConfig.onchange = (html) => {
					this.content = html
				}
				this.editor.create()
			},
			// 获取文章列表
			getList (page) {
				this.page = page
				this.$api.get(0, '/dem/v2/companyService/page', {
					page: this.page,
					limit: this.pageSize
				}, r => {
					if (r.data.code === 0) {
						this.tableData = r.data.data.data
						this.count = r.data.data.total
					}
				})
			},
			add () {
				this.articalObj = {
					productPhoto: '',
					companyLogo: ''
				}
				this.modalMethod = '新增'
				this.creatArticalModal = true
			},
			// 修改文章
			edit (row) {
				this.articalObj = {
					productName: row.productName,
					productPhoto: row.productPhoto,
					companyName: row.companyName,
					companyLogo: row.companyLogo,
					price: row.price,
					serverTypeId: row.serverTypeId,
					id: row.id
				}
				this.editor.txt.html(row.content)
				this.content = row.content
				this.modalMethod = '修改'
				this.creatArticalModal = true
			},
			// 保存
			save () {
				this.articalObj.content = this.content
				if (this.modalMethod === '新增') {
					this.articalObj.uid = this.user.id
					this.$api.post(0, '/dem/v2/companyService', this.articalObj, r => {
						if (r.data.code === 0) {
							this.$Message.success('新增成功')
							this.getList(1)
						} else {
							this.$Message.error('新增失败')
						}
					})
				} else if (this.modalMethod === '修改') {
					this.$api.put(0, '/dem/v2/companyService', this.articalObj, r => {
						if (r.data.code === 0) {
							this.$Message.success('修改成功')
							this.getList(1)
						} else {
							this.$Message.error('修改失败')
						}
					})
				}
			},
			// 删除文章
			remove (row) {
				this.deleteArticalModal = true
				this.deleteId = row.id
			},
			// 上传产品图片
			uploadSuc (response) {
				this.$set(this.articalObj, 'productPhoto', response.data)
			},
			// 上传公司logo
			uploadLogoSuc (response) {
				this.$set(this.articalObj, 'companyLogo', response.data)
			},
			// 退出面板
			cancel () {
				this.editor.txt.html('<p></p>')
				this.content = ''
			},
			deleteArtical () {
				this.$api.delete(0, '/dem/v2/companyService', {
					id: this.deleteId
				}, r => {
					if (r.data.code === 0) {
						this.$Message.success('删除成功')
						this.getList(1)
					} else {
						this.$Message.error('删除失败')
					}
				})
			}
		},
		mounted () {
			this.user = JSON.parse(sessionStorage.user)
			this.createEdit()
			this.getList(1)
			this.headers = {
				'Authorization': Util.getToken()
			}
			this.$api.get(0, '/dem/v2/serviceClassification/list', {}, r => {
				if (r.data.code === 0) {
					this.classList = r.data.data
				}
			})
		}
	}
</script>

<style scope>
	.ivu-upload {
		display: inline-block;
	}

	.editBox {
		margin-bottom: 24px;
	}
</style>
